<template>
	<view>
		<van-dialog id="van-dialog" />
		<view class="my_wrap br">
			<view class="avtar_wrap">
				<img :src="userInfo.avatar">
			</view>
			
			<view class="my_msg br">
				<view class="top">
					<view class="nickname">昵称:{{userInfo.nickname || ''}}</view>
					
					<view class="state">
						账号状态:{{userInfo.group_id>1?'已认证':'未认证'}}
					</view>
				</view>
				<view class="bottom">
					<view class="tip">
						<text>账号类型:未分类</text>
					</view>
					
				</view>
			</view>
			
			<view class="icon_setup">
				<img src="https://fakeimg.pl/75x75/">
			</view>
		</view>
		
		
		<view class="renzheng">
			
				<van-notice-bar
				  left-icon="info-o"
				  text="您的账号未进行认证,暂时无法进行操作"
				  :scrollable="false"
				  color="#000"
				  background="#fff"
				  
				/>
			<view style="display: flex;justify-content: center;">
				<van-button custom-class="btn_renzheng" type="primary" @click="goIdentify">去认证</van-button>
			</view>
		</view>
		
		
		<view class="server_wrap ">
			<view class="server ">
				<view class="server_tit">
					<text>服务</text>
				</view>
				<view class="server_form">
					<view class="personal">
						<view class="per_img">
							<img src="https://fakeimg.pl/166x110/">
						</view>
						<view class="per_tit">
							<text>个人信息</text>
						</view>
					</view>
					<view class="personal">
						<view class="per_img">
							<img src="https://fakeimg.pl/166x110/">
						</view>
						<view class="per_tit">
							<text>个人信息</text>
						</view>
					</view>
					<view class="personal">
						<view class="per_img">
							<img src="https://fakeimg.pl/166x110/">
						</view>
						<view class="per_tit">
							<text>个人信息</text>
						</view>
					</view>
					<view class="personal">
						<view class="per_img">
							<img src="https://fakeimg.pl/166x110/">
						</view>
						<view class="per_tit">
							<text>个人信息</text>
						</view>
					</view>
				</view>
				
				
			</view>
			<view class="logout">
				<view class="logout_btn fs26" @click="goLogout">
					<text>退出登录</text>
				</view>
			</view>
		</view>
		
		<!-- <van-tabbar :active="active" @change="onChange">
		  <van-tabbar-item icon="home-o" name="home">首页
			
		  </van-tabbar-item>
		  <van-tabbar-item icon="search" name="content">知识</van-tabbar-item>
		  <van-tabbar-item icon="friends-o" name="manage">管理</van-tabbar-item>
		  <van-tabbar-item icon="setting-o" name="profile">我的</van-tabbar-item>
		</van-tabbar> -->
		
		
		<!-- <TabBar ref="tabChange"></TabBar> -->
		
	</view>
</template>

<script>
	import Dialog from "../../wxcomponents/vant/dialog/dialog.js"
	import {logout} from "../../api/api.js"
	import {mapState,mapMutations} from "vuex"
	// import Footer from "../../components/footer.vue"
	// import TabBar from "../../components/tabBar.vue"
	export default {
		data() {
			return {
				active:'profile'
			}
		},
		onInit() {
			
		},
		onLoad() {
			// 未登录切换登录
			if(!this.$store.state.hasLogin){
				uni.navigateTo({
					url:'../login/login'
				})
			}
			// this.getStorage()
			// console.log(this.$refs)
			
		},
		onShow(){
			if(!this.$store.state.hasLogin){
				uni.navigateTo({
					url:'../login/login'
				})
			}
		},
		computed:{
			...mapState(['hasLogin','userInfo'])
		},
		components:{
			// Footer
			// TabBar
		
		},
		methods: {
			
			onChange(event){
				this.active = event.detail
				if(this.active === 'home') return uni.navigateTo({url:'../index/index'})
				if(this.active === 'content') return uni.navigateTo({url:'../content/content'})
				if(this.active === 'manage') return uni.navigateTo({url:'../manage/manage'})
				if(this.active === 'profile'){
					return uni.navigateTo({url:'../my/my'})
				}
					
				
			},
			
			// 跳转到认证页面
			goIdentify(){
				uni.navigateTo({
					url:"../identify/identify"
				})
			},
			
			
			
			...mapMutations(['logout']),
			// 获取缓存信息
			//  getStorage(){
			// 	let that = this;
				
			// 	// console.log('that',that)
				
			// 	 uni.getStorage({
			// 		key:'userInfo',
			// 		success:function(res){
			// 			console.log('ress',res.data)
			// 			that.userInfo = res.data;
						
			// 			// console.log('u',that.userInfo.nickname)
			// 		}
			// 	})
			// },
			
			async goLogout(){
				Dialog.confirm({
					
				  message: '确认退出吗?',
				})
				  .then(() => {
						// console.log('确认')
						// this.$store.commit('logout')
						// console.log('this',this)
						if(this.hasLogin){
							 this.logout()
						}
						uni.navigateTo({
							url:'../login/login'
						})
							
						
						
				  })
				  .catch(() => {
					// console.log('取消')
				  });
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	// .br{
	// 	border: 1px solid red;
	// }
	*{
		box-sizing: border-box;
	}
	
	/deep/ .van-notice-bar{
		padding: 0 90rpx;
	}
	
	
	
	/deep/ .van-notice-bar__content{
		font-size: 26rpx !important;
	}
	
	.renzheng{
		margin-top: 40rpx;
		
		/deep/ .btn_renzheng{
			height: 60rpx;
			padding: 0 80rpx;
			font-size: 30rpx;
		}
	}
	
	.my_wrap{
		padding-top: 55rpx;
		width: 100%;
		height: 240rpx;
		background-color: $primaryColor;
		margin-top: 14rpx;
		display: flex;
		justify-content: space-around;
		
		
		
		.avtar_wrap{
			
			margin-left: 45rpx;
			// border-radius: 50rpx;
			
			img{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
		}
		.my_msg{
			width: 360rpx;
			// height: 134rpx;
			
			.top{
				font-size: 30rpx;
				color: #ffffff;
				line-height: 60rpx;
				
				.state{
					// margin-left: -10rpx;
				}
			}
			.bottom{
				
				font-size: 30rpx;
				color: #ffffff;
				line-height: 40rpx;
				
				.gomy{
					border-bottom: 1px solid #ffeb3c;
				}
			}
		}
		.icon_setup{
			img{
				width: 75rpx;
				height: 75rpx;
				border-radius: 50%;
			}
		}
	}
	.server_wrap{
		padding: 30rpx 28rpx 0 35rpx;
		.server{
			// width: 960rpx;
			// height: 900rpx;
			border-radius: 48rpx;
			box-shadow: 2rpx 2rpx #d9d9d9;
			border: 1px solid #d9d9d9;
			
			
			
			.server_tit{
				font-size: 40rpx;
				color: #666666;
				border-bottom: 6rpx solid #666666;
				font-weight: bold;
				padding-top: 28rpx;
				padding-left: 56rpx;
				padding-bottom: 28rpx;
			}
			.server_form{
				// height: 808rpx;
				padding: 52rpx 64rpx 0;
				
				
				.personal{
					display: flex;
					align-items: center;
					border-bottom: 6rpx solid #F1F1F1;
					margin-bottom: 50rpx;
					.per_img{
						margin-right: 74rpx;
						img{
							width: 100rpx;
							height: 88rpx;
						}
					}
				}
			}
			
		}
		.logout{
			display: flex;
			justify-content: center;
			margin-top: 50rpx;
			.logout_btn{
				background-color: #d9d5d5;
				text-align: center;
				border-radius: 8rpx;
				// width: 514rpx;
				padding: 0 80rpx;
				height: 64rpx;
				line-height: 64rpx;
				color: #000;
				
			}
		}
	}
</style>
